はじめに

p5.strands は、p5.js で JavaScript を使ってシェーダーを書くための新しい手法です。多くのシェーダーエフェクトは p5.js の 2D レンダラーでも作成 可能 ですが、シェーダーは多数のオブジェクトに複雑なエフェクトを適用するのに最適です。また、他のメディアと同様に、シェーダー独自の創造的な可能性も秘めています！

p5.js 2.0 より前でも、GLSL を使ってシェーダーを書くことができました。シェーダーは GPU 上で並列に実行され、視覚効果を作り出します。GPU は多くの同様の操作を並行して実行できるため、CPU よりもはるかに高速です。

p5.js のスケッチを書くとき、あなたは CPU に対して一連の指示を与えています。シェーダー（p5.strands または GLSL を使用）を追加するときは、GPU に対して多くの処理を一度に、同時に実行するように指示しています。例えば、フラグメントシェーダーでは、各ピクセルに対して膨大な計算が並列で行われます。

画面への描画（レンダリング）は、並列処理の利点を活かすことができます。シェーダーを使えば、写実的なライティングのシミュレーション、ポストプロセッシング（後処理）エフェクト、複雑なジオメトリのレンダリングなど、CPU では遅すぎたり困難だったりするビジュアルを作成できます。シェーダーを学ぶことは、ゲーム開発、映画の VFX、あらゆる種類のデジタルアートに関心がある人にとって価値があります。また、コンピュータを使って考えるための、楽しくユニークな方法でもあります。

p5.strands の仕組みを学ぶために、4つの異なるシェーダーを使用して、それぞれ異なる概念を説明する 3D スケッチを作成します。コードはこのチュートリアルを通じて段階的に構築され、最後に完成したコードが提供されます。

シェーダーとは？

シェーダーは、WebGL 用の GLSL などの専門言語で書かれた GPU プログラムです。主に2つのタイプがあります：

• 頂点シェーダー (Vertex shaders): 図形の頂点を変換します（「どこに」描画するかを定義）
• フラグメントシェーダー (Fragment shaders): 各ピクセルの色を定義します（「どのように」描画するかを定義）

頂点シェーダーとフラグメントシェーダーの両方が、WebGL モードでのレンダリングに必要です。幸いなことに、p5.js にはデフォルトのシェーダーが用意されているため、自分でゼロから書く必要はありません。

スケッチのソースコードを見てみましょう：

let myShader;

function lightingSetup() {
  ambientLight(80, 80, 140);
  const pointX = cos(millis() / 750) * 100;
  const pointZ = sin(millis() / 750) * 100;
  pointLight(80, 80, 255, pointX, -60, pointZ);
}

function setup() {
  createCanvas(200, 200, WEBGL);
  pixelDensity(1);
}

function draw() {
  background(100);
  // shader(baseColorShader());
  lightingSetup();
  sphere(80);
}

明示的に設定しなくても、あるシェーダーが塗りつぶしのライティングとシェーディング（陰影）を計算し、別のシェーダーがストロークを描画しています。

また、filter() を呼び出したときに使用できるフィルターも、p5.js が提供するシェーダーです。

WebGL の醍醐味は、独自のシェーダーを書けることであり、2D レンダラーでは困難だった多くの可能性が解き放たれます。また、非常に高速に動作します。次のセクションでは、チュートリアルのメインパートを開始し、新しい p5.js シェーディング言語の使い方を学びます。